<!--
 * @Description: 数据项管理页面
-->
<template>
  <BaseMainSlot :show-tab="true">
    <template v-slot:btn-box>
      <ActionBar :page-no="105" :add-active="addActive" :has-edit="false" :has-save="false" :del-active="delActive"
        @add="add" @del="del" />
    </template>
    <template v-slot:search-box>
      <div class="common-search-item">
        <div class="label">数据项名称:</div>
        <div class="input">
          <el-input v-model="dataItemName" clearable @keyup.enter.native="search" />
        </div>
      </div>
    </template>
    <template v-slot:table-box>
      <div class="dataitem-main">
        <div class="tr-sid">
          <div class="sid-head">选择设备</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" />
          </div>
        </div>
        <div class="tab-box">
          <div class="tab-content">
            <el-table v-loading="loading" :data="tableData" stripe border height="calc(100% - 50px)"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" :selectable="(row) => { return !row.selectable }" />
              <el-table-column type="index" label="序号" width="100" />
              <el-table-column prop="dataItem.originalName" label="数据项名称" />
              <el-table-column prop="dataItem.dataTypeName" label="数据类型" />
              <el-table-column width="120" label="操作">
                <template v-if="scope.row.deviceDataItemMapperId" slot-scope="scope">
                  <el-button v-if="judgePermission(105, 'delete')" class="text-btn-cursor cursor-delete" type="text"
                    size="small" @click="handleDelete(scope.row.deviceDataItemMapperId)">
                    <i class="el-icon-delete"></i> 删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
              @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
          </div>
        </div>
      </div>
      <el-dialog :title="'数据项配置'" :visible.sync="dialogFormVisible" width="300px">
        <el-form ref="formData" label-position="left" :model="formData" :rules="rules" class="el-form">
          <el-form-item label="数据项选择:" prop="dataItemList" class="w100p">
            <el-select filterable clearable v-model="formData.dataItemList" clearable multiple filterable @change="dataItem">
              <el-option v-for="(item, index) in dataItemList" :key="index" :label="item.originalName"
                :value="item.dataItemId" />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
          <el-button class="savebtn" type="primary" @click="save()">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/area";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import treeSide from "./components/trelist.vue";
import { mymixin } from "@/utils/mixins";
import { mapGetters } from "vuex";
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: "deviceAllocationData",
  components: { ActionBar, Pagination, BaseMainSlot, treeSide },
  mixins: [mymixin],
  data () {
    return {
      testdataItemName: "",
      // 当前可修改列表
      editlist: {},
      // 选中的地块组或地块id
      paramslist: {},
      // 是否展示弹框
      dataaddVisible: false,
      dataaddVisibletwo: false,
      dataaddVisiblethree: false,
      // 数据项类型id
      topitemtypeid: 1,
      // 数据项下拉数据
      dataItemList: [],
      // 下拉选择是否展示idlist
      isshowlist: {
        evr: 0,
        control: 0
      },
      // 设备展示下拉数据
      isshowequipmentstaulist: [
        { name: "是", value: true },
        { name: "否", value: false }
      ],
      // 环境数据展示下拉数据
      isshowevrimentdatalist: [
        { name: "是", value: true },
        { name: "否", value: false }
      ],
      // 当前选中的组织结构id
      nowselctorgid: "",
      // 单位下拉框
      ownUnitList: [],
      // 员工姓名
      dataItemName: "",
      // 当前组织机构名
      facilityName: "",
      // 当前选中的数据项数组
      nowSelectList: [],
      loading: false,
      // 外部气象站数据
      otherweather: {
        // 可选择的气象站
        rtulist: [],
        // 可选择的数据项
        dataItemList: [],
        // 集中器id
        rtuId: "",
        // 数据项id
        dataItemId: "",
        // 展示数据项名称
        dataItemName: "",
        // 数据项单位
        unitId: "",
        deviceNo: ""
      }
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {
    // nowChanceStau(newval) {
    //   if (newval === 'add') {
    //     this.dataaddVisible = true
    //   }
    //   if (newval === 'edit') {
    //     this.dataaddVisibletwo = true
    //   }
    // }
  },
  created () { },
  mounted () {
    this.getselectdatalist();
  },
  methods: {
    // 弹框关闭
    handleClose (done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 点击树状触发方法
    treeselectvalue (e) {
      let dd = e.deviceNo;
      this.deviceNo = dd;
      this.getTableDataList(dd);
    },
    dataItem (e) {
      if (this.topitemtypeid === 4) {
        let name = this.otherweather.dataItemList[e].dataItemName;
        this.testdataItemName = name;
      } else {
        let name = this.dataItemList[e].dataItemName;
        this.testdataItemName = name;
      }
    },
    // 添加时气象站选择
    rtuchang (e) {
      // console.log(e)
      nowpagereq.getrtudataitemlist(e).then(res => {
        this.otherweather.dataItemList = res.data;
      });
    },
    // 获取两个下拉框数据
    getselectdatalist () {
      // 获取数据项选择项
      nowpagereq.getalldataitemselect().then(res => {
        if (res.success === false) {
          this.$message.error("数据项名称获取失败");
        }
        this.dataItemList = res.data;
        // console.log(res)
      });
      // ---end---
    },
    getTableDataList (e) {
      // 1物联数据normal 2为水质监测waterQuality 3为气象站数据meteorological
      // category: "",
      this.loading = false;
      this.tableData = [];
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          deviceNo: this.deviceNo
        }
      };
      // 查询表格数据
      nowpagereq.datadevicelist(params, this.paramslist).then(res => {
        this.loading = false;
        if (res.success) {
          // this.$message.success("查询成功");
        } else {
          this.$message.error("查询失败");
        }
        let data = res.data;
        // 赋值总条数
        this.totalSize = data.totalElements;
        // 赋值数组
        this.tableData = data.content;
        this.addblankmet();
        this.resetActionBar();
      });
    },

    search () {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize (pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage (currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    handleEdit (row) {
      // 外部气象站较特殊
      this.editlist = row;
      if (row.visible) {
        this.isshowlist.evr = 0;
      } else {
        this.isshowlist.evr = 1;
      }
      if (row.control) {
        this.isshowlist.control = 0;
      } else {
        this.isshowlist.control = 1;
      }
      this.nowChanceStau = "edit";
      this.dataaddVisibletwo = true;
    },
    handleSelectionChange (list) {
      this.nowSelectList = [];
      let notvalue = true;
      this.nowSelectList = list.map(item => {
        if (item.deviceDataItemMapperId) {
          return item.deviceDataItemMapperId;
        } else {
          notvalue = false;
          return "";
        }
      });
      if (notvalue === false) {
        this.delActive = false;
        this.$message.warning("不可选择空数据！");
        return;
      }
      if (this.nowSelectList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    delmessage () {
      nowpagereq
        .delListById({
          deviceDataItemMapperIdList: this.nowSelectList
        })
        .then(res => {
          if (res.success) {
            this.$message.success("删除成功！");
            this.getTableDataList();
          } else {
            this.$message.error("删除失败！");
          }
        });
    },
    handleDelete (data) {
      // nowpagereq.delFarmingTypelist(data).then(res => {
      //   if (res.success) {
      //     this.$message.success('删除成功')
      //     this.getTableDataList();
      //   } else {
      //     this.$message.error('删除失败')
      //   }
      // })
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {
          nowpagereq.delFarmingTypelist(data).then(res => {
            if (res.success) {
              this.$message.success("删除成功");
              this.getTableDataList();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    },
    save () {
      // -----保存状态判断-----
      if (this.nowChanceStau === "edit") {
        nowpagereq.editlist().then(res => {
          if (res.success) {
            this.$message.success("修改成功！");
            this.getTableDataList();
          } else {
            this.$message.error("修改失败！");
          }
        });
      } else if (this.nowChanceStau === "add") {
        this.formData.deviceNo = this.deviceNo;
        this.formData.organizationNo = sessionStorage.organizationNo;
        nowpagereq.addlist(this.formData).then(res => {
          if (res.success) {
            this.$message.success("新增成功！");
            this.getTableDataList();
          } else {
            this.$message.error("新增失败！");
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__wrapper .el-input__inner {
  color: #272929 !important;
}

::v-deep .el-dialog__wrapper .el-dialog {
  width: 500px !important;
}

.dataitem-main {
  width: 100%;
  // height: calc(100% - 110px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .tr-sid {
    width: 240px;
    flex-shrink: 0;
    margin-right: 10px;
    height: 100%;
    padding: 10px;
    background-color: #074052;

    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }

    .sid-tree {
      width: 100%;
      height: calc(100% - 31px);
    }
  }

  .tab-box {
    width: 100%;
    height: 100%;
    position: relative;

    .tab-content {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }

  .z-form {
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-left: 60px;
    height: 100%;
    border-left: dashed 1px #fff;

    .el-form {
      width: 100%;
      height: 100%;
      margin: 0 auto;

      ::v-deep .el-form-item {
        width: 80%;
        display: flex;
        margin: 0 auto;
        justify-content: space-around;
        font-size: 30px;

        .el-input {
          .el-input__inner {
            width: 100%;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}

.zh-dia {
  width: 100%;
  // border:rgb(173, 17, 17) 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;

  .dia-item {
    width: 100%;
    height: 36px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item-name {
      width: 75px;
      white-space: nowrap;
    }

    .item-value {
      width: calc(100% - 75px);
      white-space: nowrap;
      text-align: center;
    }

    ::v-deep .el-input {
      width: 300px !important;
    }

    ::v-deep .el-input__inner {
      width: 300px !important;
    }
  }
}
</style>
